<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>植物基底饮食屋</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body>

<!-- 顶部标题 -->
<header class="bg-success text-white text-center py-4">
  <h1>植物基底饮食屋</h1>
</header>

<!-- 卡片区域 -->
<section class="container my-5">
  <div class="row" id="foodCards">
    <!-- 动态生成卡片 -->
  </div>
</section>

<!-- 模态框 -->
<div class="modal fade" id="foodDetailsModal" tabindex="-1" role="dialog" aria-labelledby="foodDetailsModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="foodDetailsModalLabel">食物详情</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <img id="modalImage" src="" class="img-fluid mb-3" alt="食物图片">
        <p id="modalDescription"></p>
        <strong>价格: </strong><span id="modalPrice"></span><br>
        <strong>库存: </strong><span id="modalStock"></span>
        <p id="info"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-success" id="buyButton">购买</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<!-- 版权信息 -->
<footer class="bg-dark text-white text-center py-3">
  <p>&copy; 2025 植物基底饮食屋. 保留所有权利.</p>
</footer>

<!-- JS 依赖 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

<script>
let currentFood = null;
let count = 1;

$(document).ready(function () {
  // 加载 Flask 提供的 API
  $.getJSON("http://127.0.0.1:5000/api/foods", function (data) {
    const foodCardsContainer = $("#foodCards");

    data.forEach(food => {
      const cardHtml = `
        <div class="col-md-3 mb-4">
          <div class="card h-100">
            <img src="${food.foodImage}" class="card-img-top" alt="${food.foodName}">
            <div class="card-body d-flex flex-column justify-content-between">
              <div>
                <h5 class="card-title">${food.foodName}</h5>
                <p class="card-text">价格: ${food.foodPrice} 元</p>
              </div>
              <button class="btn btn-primary align-self-end" data-toggle="modal" data-target="#foodDetailsModal" data-food='${JSON.stringify(food)}'>详情</button>
            </div>
          </div>
        </div>
      `;
      foodCardsContainer.append(cardHtml);
    });

    // 模态框绑定
    $('#foodDetailsModal').on('show.bs.modal', function (event) {
      const button = $(event.relatedTarget);
      currentFood = button.data('food');
      $('#modalImage').attr('src', currentFood.foodImage);
      $('#modalDescription').text(currentFood.foodDescription);
      $('#modalPrice').text(`${currentFood.foodPrice} 元`);
      $('#modalStock').text(currentFood.stock);
      $('#info').text('');
    });

    // 购买按钮逻辑
    $('#buyButton').on('click', function () {
      if (!currentFood) return;

      if (currentFood.stock <= 0) {
        $('#info').text('该商品已售罄！').css('color', 'red');
        return;
      }

      let purchases = [];
      purchases.push({
        name: currentFood.foodName,
        quantity: 1,
        price: currentFood.foodPrice,
        timestamp: new Date().toLocaleString()
      });

      localStorage.setItem(`order${count}`, JSON.stringify(purchases));
      count++;
      currentFood.stock -= 1;
      $('#modalStock').text(currentFood.stock);
      $('#info').text('购买成功！').css('color', 'green');
    });

  }).fail(function () {
    console.error("无法加载食物数据！");
  });
});
</script>
</body>
</html>
